<template>
	<!-- 选择器主体 -->
	<view class="picker-content">
		<!-- 三级联动选择区域 -->
		<view class="picker-content-wrap" v-if="selectTab == '城市'">
			<scroll-view class="picker-column picker-column1" scroll-y :scroll-top="provinceScrollTop">
				<view v-for="(item, index) in provinceList" :key="index" class="picker-item"
					:class="{ active: selectedProvince.code === item.code }" @click="selectProvince(item)">
					{{ item.province }}
				</view>
			</scroll-view>

			<scroll-view class="picker-column picker-column2" scroll-y :scroll-top="cityScrollTop">
				<view v-for="(item, index) in cityList" :key="index" class="picker-item"
					:class="{ active: selectedCity.code === item.code }" @click="selectCity(item)">
					{{ item.city }}
				</view>
			</scroll-view>

			<scroll-view class="picker-column picker-column3" scroll-y :scroll-top="areaScrollTop">
				<view v-for="(item, index) in areaList" :key="index" class="picker-item"
					:class="{ active: selectedArea.code === item.code }" @click="selectArea(item)">
					{{ item.area }}
				</view>
			</scroll-view>
		</view>
		<view class="consultStyle" v-if="selectTab == '擅长对象'">
			<view :class="item.select?'activeSel':''" v-for="(item,index) in adeptList" :key="item.dictCode"
				@click="handleAdept(index)">{{ item.dictLabel }}</view>
		</view>
		<!-- <view class="consultStyle" v-if="selectTab == '咨询方式'">
			<view :class="item.select ? 'activeSel' : ''" v-for="(item, index) in consultStyle" :key="index"
				@click="consultSel(index)">{{ item.name }}</view>
		</view> -->
		<view class="appointStyle" v-if="selectTab == '最近可约'">
			<view :class="item.id == appointIndex ? 'activeSel' : ''" v-for="(item, index) in appointList" :key="index"
				@click="appointSel(item)">{{ item.name }}</view>
		</view>
		<view class="moreStyle" v-if="selectTab == '更多'">
			<view class="sex">
				<view>性别</view>
				<view>
					<view :class="sexId === item.dictValue?'activeSel' : ''" v-for="(item, index) in sexList"
						:key="index" @click="sexSel(item)">{{ item.dictLabel }}</view>
				</view>
			</view>
			<!-- <view class="adept">
				<view>擅长对象</view>
				<view>
					<view :class="item.select?'activeSel':''" v-for="(item,index) in adeptList" :key="item.dictCode"
						@click="handleAdept(index)">{{ item.dictLabel }}</view>
				</view>
			</view> -->
		</view>
		<!-- 操作按钮 -->
		<view class="picker-footer">
			<view class="btn reset-btn" @click="resetSelection">重置</view>
			<view class="btn confirm-btn" @click="confirmSelection">确定</view>
		</view>
	</view>
</template>

<script>
	import areaData from '@/subset/static/city/ChinaCitys';
	import {
		getDoc
	} from '@/api/index/index.js'
	export default {
		data() {
			return {
				provinceList: [], // 省级数据
				cityList: [], // 市级数据
				areaList: [], // 区级数据
				selectedProvince: {}, // 已选省份
				selectedCity: {}, // 已选城市
				selectedArea: {}, // 已选区域
				provinceScrollTop: 0,
				cityScrollTop: 0,
				areaScrollTop: 0,
				// consultStyle: [{
				// 		id: 1,
				// 		name: '电话咨询',
				// 		select: false
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '线上语音',
				// 		select: false
				// 	},
				// 	{
				// 		id: 3,
				// 		name: '线上视频',
				// 		select: false
				// 	},
				// 	{
				// 		id: 4,
				// 		name: '当面咨询',
				// 		select: false
				// 	}
				// ],
				appointList: [{
						id: 1,
						name: '三天内可约'
					},
					{
						id: 2,
						name: '五天内可约'
					},
					{
						id: 3,
						name: '七天内可约'
					}
				],
				appointIndex: 0,
				sexList: [],
				sexId: '',
				adeptList: []
			};
		},
		props: ['selectTab'],
		mounted() {
			// 初始化数据（实际应从接口获取）
			// this.loadAreaData();
			this.provinceList = Object.values(areaData);
			getDoc({
				dictType: 'sys_user_sex'
			}).then(res => {
				// console.log(res);
				this.sexList = res.rows;

			})
			getDoc({
				dictType: 'specific'
			}).then(res => {
				// console.log(res);
				let arr = res.rows;
				this.adeptList = [];
				arr.map(i => {
					this.adeptList.push({
						select:false,
						dictValue:i.dictValue,
						dictLabel:i.dictLabel
					})
					
				})
				// console.log(this.adeptList);
			})
		},
		methods: {
			// 选择省份
			selectProvince(province) {
				this.selectedProvince = province;
				this.cityList = Object.values(province.citys || {});
				this.selectedCity = this.cityList[0] || {};
				this.areaList = Object.values(this.selectedCity.areas || {});
				this.selectedArea = this.areaList[0] || {};
				this.updateScrollPosition();
			},

			// 选择城市
			selectCity(city) {
				this.selectedCity = city;
				this.areaList = Object.values(city.areas || {});
				this.selectedArea = this.areaList[0] || {};
				this.updateScrollPosition();
			},

			// 选择区域
			selectArea(area) {
				this.selectedArea = area;
				this.updateScrollPosition();
			},

			// 重置选择
			resetSelection() {
				this.selectedProvince = {};
				this.selectedCity = {};
				this.selectedArea = {};
				this.provinceList = Object.values(areaData);
				this.cityList = [];
				this.areaList = [];
				this.appointIndex = 0;
				this.sexId = -1;
				this.adeptList.map(i => {
					i.select = false;
				})
				// this.consultStyle.map(i => {
				// 	i.select = false;
				// })
				this.$emit('confirmSel', {reset:true});
			},

			// 确认选择
			confirmSelection() {
				// let arr = []
				// this.consultStyle.forEach((i) => {
				// 	if (i.select) {
				// 		arr.push(i.name)
				// 	}
				// })
				let arrA = []
				this.adeptList.forEach(i => {
					if (i.select) {
						// arrA.push({
						// 	dictLabel: i.dictLabel,
						// 	dictValue: i.dictValue
						// })
						arrA.push(i.dictValue)
					}
				})
				const result = {
					province: this.selectedProvince.code,
					city: this.selectedCity.code,
					area: this.selectedArea.code,
					sexId: this.sexId,
					appointId: this.appointIndex,
					// consultStyle: arr,
					adeptList:arrA

				};
				this.$emit('confirmSel', result);
			},

			// 更新滚动位置
			updateScrollPosition() {
				this.$nextTick(() => {
					const itemHeight = 44; // 每个选项高度
					this.provinceScrollTop = (this.selectedProvince.index || 0) * itemHeight;
					this.cityScrollTop = (this.selectedCity.index || 0) * itemHeight;
					this.areaScrollTop = (this.selectedArea.index || 0) * itemHeight;
				});
			},
			consultSel(index) {
				this.consultStyle[index].select = !this.consultStyle[index].select;
			},
			appointSel(item) {
				this.appointIndex = item.id;
			},
			handleAdept(index) {
				// console.log(index);
				this.adeptList[index].select = !this.adeptList[index].select;
				// console.log(this.adeptList);
			},
			sexSel(item) {
				this.sexId = item.dictValue;
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	.area-picker-container {
		position: relative;
	}

	.mask {
		// position: fixed;
		// top: 0;
		// left: 0;
		// right: 0;
		// bottom: 0;
		// background: rgba(0, 0, 0, 0.5);
		// z-index: 998;
	}

	.picker-content {
		width: 100%;
		height: 100%;
		position: relative;

		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		// background: #fff;
		// z-index: 999;
		// border-radius: 16rpx 16rpx 0 0;
		// padding: 20rpx 0;
	}

	.picker-content-wrap {
		width: 100%;
		height: calc(100% - 100rpx);
		display: flex;
	}

	.picker-column {
		height: 100%;
		width: 33%;
		// margin: 0 30rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.picker-column1 {
		border-right: 1rpx solid #eee;
	}

	.picker-column2 {
		border-right: 1rpx solid #eee;
	}

	.picker-column3 {
		border-right: 1rpx solid #eee;
	}

	.picker-item {
		height: 88rpx;
		line-height: 88rpx;
		text-align: left;
		color: #666;
		font-size: 26rpx;
		// border-bottom: 1rpx solid #eee;
	}

	.picker-item.active {
		color: #007aff;
		font-weight: bold;
		position: relative;
	}

	.picker-item.active::after {
		content: '';
		position: absolute;
		// bottom: 0;
		// left: 50%;
		// transform: translateX(-50%);
		// width: 60%;
		// height: 4rpx;
		// background: #007aff;
	}

	.picker-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 20rpx;
		padding: 20rpx 40rpx;
		border-top: 1rpx solid #eee;
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
	}

	.btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.reset-btn {
		color: #333;
		border: 1rpx solid #ddd;
	}

	.confirm-btn {
		color: #fff;
		background: #007aff;
	}

	.consultStyle {
		width: 100%;
		height: calc(100% - 100rpx);
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		background-color: #fff;
		gap: 10px;

		>view {
			padding: 0 25rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 40rpx;
			border: 2rpx solid #ddd;
			background-color: #fff;
			color: #000;
			font-size: 24rpx;
			flex: 0 0 calc(25% - 10px);
		}

		.activeSel {
			color: #007aff;
			border: 2rpx solid #007aff;
			background-color: #e1f2ff;
		}
	}

	.appointStyle {
		width: 100%;
		height: calc(100% - 100rpx);
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		background-color: #fff;

		>view {
			padding: 0 25rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 40rpx;
			border: 2rpx solid #ddd;
			background-color: #fff;
			color: #000;
			font-size: 24rpx;
		}
	}

	.moreStyle {
		width: 100%;
		height: calc(100% - 100rpx);
		padding: 30rpx;
		overflow-y: auto;

		.sex {
			width: 100%;

			>view:nth-child(1) {
				color: #007aff;
				font-size: 26rpx;
				text-align: left;
			}

			>view:nth-child(2) {
				width: 100%;
				display: flex;
				padding: 20rpx 0;

				>view {
					width: 100rpx;
					padding: 0 25rpx;
					text-align: center;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 40rpx;
					border: 2rpx solid #ddd;
					background-color: #fff;
					color: #000;
					font-size: 24rpx;
					margin-right: 40rpx;
				}
			}
		}

		.adept {
			width: 100%;
			margin-top: 20rpx;
			>view:nth-child(1) {
				color: #007aff;
				font-size: 26rpx;
				text-align: left;
			}

			>view:nth-child(2) {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: flex-start;
				padding: 20rpx 0;
				gap: 10px;

				>view {
					width: 100rpx;
					padding: 0 25rpx;
					text-align: center;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 40rpx;
					border: 2rpx solid #ddd;
					background-color: #fff;
					color: #000;
					font-size: 24rpx;
					flex: 0 0 calc(25% - 10px);
				}

				.activeSel {
					color: #007aff !important;
					border: 2rpx solid #007aff !important;
					background-color: #e1f2ff !important;
				}
			}
		}
	}

	.activeSel {
		color: #007aff !important;
		border: 2rpx solid #007aff !important;
		background-color: #e1f2ff !important;
	}
</style>